const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const Mock = require("mockjs");
module.exports = {
  mode: "development",
  entry: {
    //淘宝优惠券
    bundle: path.resolve(__dirname, "./src/main.js")

    //添加要打包在vendor里面的库
    //vendors: ['react','react-dom','react-router'],
  },
  output: {
    path: path.resolve(__dirname, "./build"),
    filename: "[name].js"
  },
  devServer: {
    // proxy: {
    //   '/api': {
    //     target: 'http://localhost:8080',
    //     secure: false
    //   }
    // },
    host: "0.0.0.0",
    port: 8080
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        use: 
          {
            loader: "babel-loader"
          }
        
      },
      {
        test: /\.scss$/,
        use: [
          {
            loader: "style-loader" // 将 JS 字符串生成为 style 节点
          },
          {
            loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
          },
          {
            loader: "px2rem-loader",
            // options here
            options: {
              remUnit: 16,
              remPrecision: 8
            }
          },
          {
            loader: "postcss-loader",
            options: {
              sourceMap: true,
              config: {
                path: "postcss.config.js" // 这个得在项目根目录创建此文件
              }
            }
          },
          {
            loader: "sass-loader" // 将 Sass 编译成 CSS
          }
        ]
      },
      {
        //使用css配置
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },

      {
        //使用less配置
        test: /\.less$/,
        loader: "style-loader!css-loader"
      },

      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "images/[hash].[ext]" //所有图片在一个目录
            }
          }
        ]
      }
    ]
  },
  performance: {
    hints: false
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  },
  devtool: "source-map",
  resolve: {
    extensions: [".js", ".jsx", ".json"] //表示这几种文件的后缀名可以省略，按照从前到后的方式来进行补全
  },
  plugins: [
    new webpack.DefinePlugin({
      //设置成production去除警告
      "process.env": {
        NODE_ENV: JSON.stringify("production")
      }
    }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./common.html",
      inject: "body"
    })
  ]
};